<template>
  <view class="container">
    <!-- 顶部计时器 -->
    <view class="timer-header">
      <text class="time">{{ formattedTime }}</text>
      <button class="control-btn" @click="toggleTimer">
        {{ timerRunning ? '暂停' : '开始' }}
      </button>
      <button class="control-btn reset-btn" @click="resetTimer" v-if="!timerRunning && elapsedTime > 0">
        重置
      </button>
	  <button>完成</button>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 训练完成标题 -->
      <view class="header">
         <input type="text" v-model="mobanList.mouldname" />
      </view>
      
      <view class="divider"></view>
      
      <!-- 杠铃卧推部分 -->
      <view >
    
        <view class="center" style="border-radius: 30rpx;padding-bottom: 60rpx;background-color: #fff;">
        <!-- 	<view v-for="(item,index) in data" :key="index">
        	</view> -->
        		<view class="item" v-for="(item,index) in mobanList.groups" key="index" style=" ">
        		<h2>{{item.name}}</h2>
        		
        		<view class="item-set" style="display: flex;flex-direction: row; align-items: center;" v-for="(item1,index1) in item.miniGroups " key="index1">
        			<input class="inputorder" type="text" v-model="item1.order" style="" />
        			<input class="inputkg" type="text" v-model="item1.weight" style="" />kg
        			<input  class="inputnumb" type="text" v-model="item1.number" style="" />次
        			 <button type="default">完成</button>
        		</view>	
        	<!-- <view class="item-btn">
        			<el-button @click="addzu(index)">新增一组</el-button>
        				<el-button>动作历史</el-button>
        					<el-button>动作规则</el-button>
        	</view> -->
        					</view>
        					</view>
      </view>
      
    
      
      
      
    
      
      <!-- 暂停卧推 -->
     
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="footer">
      <button class="footer-btn" @click="minimize">最小化</button>
      <button class="footer-btn" @click="addAction">加动作</button>
      <button class="footer-btn" @click="writeNotes">写心得</button>
      <button class="footer-btn" @click="openSettings">设置</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 计时器相关
      timerRunning: false,
      startTime: 0,
      elapsedTime: 0,
      timerInterval: null,
      
      // 训练数据
      completedGroups: 0,
      totalGroups: 3,
      completedActions: 0,
      totalActions: 2,
      completedCapacity: 0,
      totalCapacity: 160,
      
      // 难度选项
      difficultyOptions: ['简单', '正常', '困难'],
	  mobanindex:'1',
	  mobanList:''
      
  }},
  computed: {
    formattedTime() {
      const totalSeconds = Math.floor(this.elapsedTime / 1000)
      const hours = Math.floor(totalSeconds / 3600)
      const minutes = Math.floor((totalSeconds % 3600) / 60)
      const seconds = totalSeconds % 60
      
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  },
  mounted() {
  	this.getmoban()
  },
  methods: {
	  getmoban(){
	  		  uni.request({
	  url:'http://localhost:8080/mould/select',
	  				method:'POST',
	  				 data:{
	  				 id:1
	  					 },
	  		 header:{'content-type':'application/x-www-form-urlencoded'},
	  		 success: (res) => {
	  		 	console.log(res.data.data[this.mobanindex])
	  			this.mobanList=res.data.data[this.mobanindex]
	  			console.log(this.mobanList)
	  				 }
	  			  })
	  },
    // 计时器控制方法
    toggleTimer() {
      if (this.timerRunning) {
        this.pauseTimer()
      } else {
        this.startTimer()
      }
    },
    startTimer() {
      if (!this.timerRunning) {
        this.startTime = Date.now() - this.elapsedTime
        this.timerInterval = setInterval(() => {
          this.elapsedTime = Date.now() - this.startTime
        }, 1000)
        this.timerRunning = true
      }
    },
    pauseTimer() {
      if (this.timerRunning) {
        clearInterval(this.timerInterval)
        this.timerRunning = false
      }
    },
    resetTimer() {
      this.pauseTimer()
      this.elapsedTime = 0
    },
    
   
    
  
    
    // 底部按钮功能
    minimize() {
      uni.showToast({
        title: '已最小化',
        icon: 'none'
      })
    },
    addAction() {
      uni.showToast({
        title: '添加新动作',
        icon: 'none'
      })
      // 实际应用中这里可以跳转到动作选择页面
    },
    writeNotes() {
      uni.showToast({
        title: '记录训练心得',
        icon: 'none'
      })
      // 实际应用中这里可以打开心得编辑页面
    },
    openSettings() {
      uni.showToast({
        title: '打开设置',
        icon: 'none'
      })
      // 实际应用中这里可以跳转到设置页面
    }
  },
  onLoad() {
    // 页面加载时初始化计时器
    this.startTimer()
  },
  onUnload() {
    // 页面卸载时清除计时器
    this.pauseTimer()
  }
}
</script>

<style>
.container {
  /* display: flex; */
  /* flex-direction: column; */
  /* height: 100vh; */
  background-color: #f5f5f5;
}

.timer-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.time {
  font-size: 20px;
  font-weight: bold;
  flex: 1;
}

.control-btn {
  background-color: #007aff;
  color: white;
  border-radius: 5px;
  padding: 5px 15px;
  margin-left: 10px;
  font-size: 14px;
}

.reset-btn {
  background-color: #ff3b30;
}



.header {
  margin-bottom: 15px;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 15px 0;
}



.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
  display: flex;
  padding: 5px;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}

.footer-btn {
  flex: 1;
  margin: 0 5px;
  background-color: #e0e0e0;
  border-radius: 5px;
  padding: 8px 0;
  font-size: 14px;
}
	.item{
		/* width: 700rpx; */
	 background-color: #f5f5f5;
	  /* margin-left: 20rpx; */
	  margin: 20rpx auto;
	   /* margin-top: 25rpx; */
	   border-radius: 20rpx;
	}
	.item-set{
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.item-btn{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.inputorder{
		background-color: antiquewhite;
		 width: 100rpx;
		 height: 70rpx;
		 border-radius: 20rpx;
		 text-align: center;
	}	
	.inputkg{
		background-color: antiquewhite; width: 100rpx;
		height: 70rpx;
		margin-left: 50rpx;
		border-radius: 20rpx;
		text-align: center;
	}
	.inputnumb{
		background-color: antiquewhite; width: 100rpx;
		height: 70rpx; 
		margin-left: 50rpx;
		border-radius: 20rpx;
		text-align: center;
	}
</style>